<template>
  <confirm-dialog
    :title="title"
    :visible="visible"
    :loading="loading"
    @handleClose="handleClose"
    width="25%"
  >
  <template slot="content">
    <p>{{content}}</p>
    <p style="color:#FF931D">{{warningContent}}</p>
  </template>
  <template slot="footer">
    <el-button @click="handleClose">{{$t('common.cancel')}}</el-button>
    <el-button :disabled="loading" type="primary" @click="submit">{{$t('common.confirm')}}</el-button>
  </template>
  </confirm-dialog>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialop from '../../../components/Dialog/formDialog.vue';
import ConfirmDialog from '../../../components/Dialog/confirmDialog.vue';
export default Vue.extend({
  components: {
    FormDialop,
    ConfirmDialog
  },
  data() {
    return {
      title: '',
      visible: false,
      loading: false,
      content: '',
			warningContent: '',
    }
  },
  methods: {
    handleClose () {
      this.visible = false;
      this.loading = false;
    },
    init () {
      this.visible = true;
			this.loading = false;
			this.title = this.$t('systemBack.backupNow').toString();
			this.content = this.$t('systemSettings.backupContent').toString();
			this.warningContent = this.$t('systemSettings.backupWarningContent').toString();
    },
    submit () {
			this.loading = true;
      this.$pandaApi.apiCreateBackup().then(() => {
				this.$message({
					message: this.$t('systemSettings.backupSuccess').toString(),
					type: 'success'
				});
				this.$emit('success');
				this.handleClose();
			}).catch(() => {
				this.$message({
					message: this.$t('systemSettings.backupFail').toString(),
					type: 'warning'
				});
				this.handleClose();
			});
    }
  }
})
</script>
